<template>
	<view class="page">
		<view class="detail">
			<view class="top flex-between align-center">
				<view class="flex align-center">
					<text style="color: #666; font-size: 28rpx;">盘点单号:</text>
					<text style="color: #0052D9; font-size: 28rpx;">{{ detail.stocktakingTaskNo }}</text>
				</view>
				<view class="state" 
					:style="{background: ['#F3E8DC', '#E8F8F2', '#E7E7E7'][detail.status], color: ['#ED7B2F', '#52A870', '#391818'][detail.status] }"
					>
					{{ ['待盘点', '已盘点', '已取消'][detail.status] }}
				</view>
			</view>
			<view class="center padding30">
				<view class="flex">
					<view class="w33 flex align-center">
						<text style="color: #666;">盘点门仓：</text>
						<text style="color: #222;">{{ detail.storeName }}</text>
					</view>
					<view class="w33 flex align-center">
						<text style="color: #666;">盘点备注：</text>
						<text style="color: #222;">{{ detail.reason }}</text>
					</view>
					<view class="w33 flex-end align-center">
						<text style="color: #666;">盘点截至日期：</text>
						<text style="color: #222;">{{ detail.deadline }}</text>
					</view>
				</view>
				<view class="flex margin30">
					<view class="w33 flex align-center">
						<text style="color: #666;">应盘数量：</text>
						<text style="color: #222;">{{ detail.expectStock }}</text> 
					</view>
					<view class="w33 flex align-center">
						<text style="color: #666;">实盘数量：</text>
						<text style="color: #222;">{{ detail.actualStock || "--" }}</text> 
					</view>
					<view class="w33 flex-end align-center">
						<text style="color: #666;">创建时间：</text>
						<text style="color: #222;">{{ detail.createTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 20rpx; background: #f8f8f8;"></view>
		<view class="thVue padding-row30 flex align-center">
			<view class="th" style="width: 280rpx;">商品编码</view>
			<view class="th flex-center" style="flex: 1;">商品名称</view> 
			<view class="th text-center" style="width: 180rpx;">图片</view>
			<view class="th text-center" style="width: 180rpx;">商品规格</view>
			<view class="th text-center" style="width: 100rpx;">单位</view>
			<view class="th text-center" style="width: 200rpx;">应盘数量</view>
			<view class="th text-center" style="width: 300rpx;">实盘数量</view>
			<view class="th text-center" style="width: 300rpx;" v-if="detail.status==1">盘盈盘亏</view>
		</view>
		<view class="tdVue flex align-center padding-row30" v-for="(item, index) in detail.details" :key="index">
			<view class="td" style="width: 280rpx; ">{{ item.itemNumber }}</view>
			<view class="td flex-center" style="flex: 1;">{{ item.productName }}</view> 
			<view class="td flex-center align-center" style="width: 180rpx;">
				<image :src="item.image"style="width: 80rpx; height: 80rpx;"></image>
			</view>
			<view class="td text-center" style="width: 180rpx;">{{ item.sku }}</view>
			<view class="td text-center" style="width: 100rpx;">{{ item.unitName }}</view>
			<view class="td text-center" style="width: 200rpx;">{{ item.expectStock }}</view>
			<view class="td flex-center align-center" style="width: 300rpx;">
				<input type="number" placeholder="输入数量" v-model="item.actualStock" v-if="detail.status==0"/>
				<text v-if="detail.status==1">{{ item.actualStock }}</text>
			</view>
			<view class="td text-center" style="width: 300rpx; color: #1865DA;" v-if="detail.status==1 && item.differenceStock == 0">不亏不盈</view>
			<view class="td text-center" style="width: 300rpx; color: #2BA57A;" v-if="detail.status==1 && item.differenceStock > 0">盘盈{{ item.differenceStock }}</view>
			<view class="td text-center" style="width: 300rpx; color: #E34D59;" v-if="detail.status==1 && item.differenceStock < 0">盘亏{{ item.differenceStock }}</view>
		</view>
		
		<view class="place" style="height: 120rpx;"></view>
	
		<view class="botVue flex-end align-center padding-row30">
			<view class="cancel" @click="cancel">取消</view>
			<view class="submit" @click="submit" v-if="detail.status==0">提交</view>
		</view>
	</view>
</template>

<script>
	import { getStocktaskingDetail, submitStocktasking } from "@/api";
	export default {
		data(){
			return {
				detail: {},
				id: ""
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		methods: {
			getDetail(){
				getStocktaskingDetail({
					id: this.id,
				}).then(res=>{
					console.log(res)
					this.detail = res.data
					console.log("盘点任务详情", this.detail)
				})
			},
			submit(item){
				const arr = this.detail.details.filter(o=>{
					return !o.actualStock
				})
				if(arr.length>0) {
					uni.showToast({
						title: "请输入实盘数量",
						icon: "none"
					})
					return
				}
				let list = []
				this.detail.details.forEach(o=>{
					list.push({
						actualStock: o.actualStock,
						productAttrValueId: o.productAttrValueId
					})
				})
				const data = {
					stocktakingTaskId: this.id,
					list: list
				}
				uni.showLoading()
				submitStocktasking(data).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title: "盘点成功",
						icon: "none"
					})
					this.getDetail()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			
			cancel(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less">
	.detail {
		width: 100%;
		border: 1rpx solid #f8f8f8;
		border-radius: 14rpx;
		background: #fff;
		.top {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #f8f8f8;
			.state {
				width: 120rpx;
				height: 50rpx;
				border-radius: 10rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 28rpx;
			}
		}
	}
	
	.thVue {
		width: 100%;
		height: 100rpx;
		background: #fff;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f8f8f8;
		.th {
			font-size: 24rpx;
			color: #999;
		}
	}
	.tdVue {
		width: 100%;
		height: 100rpx;
		background: #fff;
		border-bottom: 1rpx solid #f8f8f8;
		box-sizing: border-box;
		.td {
			color: #333;
			font-size: 24rpx;
			input {
				width: 60%;
				height: 60rpx;
				background: #f8f8f8;
				border-radius: 12rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				text-align: center;
				color: #333;
			}
		}
	}

	.botVue {
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 99;
		.cancel {
			width: 330rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #f5f5f5;
			line-height: 80rpx;
			text-align: center;
			color: #222;
		}
		.submit {
			width: 330rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #1963DC;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			margin-left: 30rpx;
		}
	}
</style>